import '@animxyz/core';
import 'swiper/css';
import { Swiper, SwiperClass, SwiperSlide } from 'swiper/react';

import Bg1 from '@/assets/bg-1.jpg';
import Bg2 from '@/assets/bg-2.jpg';
import Bg3 from '@/assets/bg-3.jpg';
import Bg4 from '@/assets/bg-4.jpg';

import { useRef } from 'react';
import Car1 from './Car1';
import Car2 from './Car2';
import Car3 from './Car3';
import Car4 from './Car4';

export default function () {
  const swiperRef = useRef<SwiperClass>();

  return (
    <>
      <Swiper
        className="h-[1240px] text-white relative"
        slidesPerView={1}
        onSwiper={(swiper) => (swiperRef.current = swiper)}
        onSlideChangeTransitionEnd={() => {
          const activeIndex = swiperRef.current?.activeIndex || 0;
        }}
      >
        {/* 1 */}
        <SwiperSlide
          className="h-[1240px] text-white bg-no-repeat bg-center bg-cover relative swiper-no-swiping"
          style={{
            backgroundImage: `url(${Bg1})`,
          }}
        >
          <Car1 />
        </SwiperSlide>

        {/* 2 */}
        <SwiperSlide
          className="h-[1240px] text-white bg-no-repeat bg-center bg-cover relative swiper-no-swiping"
          style={{
            backgroundImage: `url(${Bg2})`,
          }}
        >
          <Car2 />
        </SwiperSlide>

        {/* 3 */}
        <SwiperSlide
          className="h-[1240px] text-white bg-no-repeat bg-center bg-cover relative swiper-no-swiping"
          style={{
            backgroundImage: `url(${Bg3})`,
          }}
        >
          <Car3 />
        </SwiperSlide>

        {/* 4 */}
        <SwiperSlide
          className="h-[1240px] text-white bg-no-repeat bg-center bg-cover relative swiper-no-swiping"
          style={{
            backgroundImage: `url(${Bg4})`,
          }}
        >
          <Car4 />
        </SwiperSlide>
      </Swiper>
    </>
  );
}
